import { useContext, useEffect, useRef, useState } from 'react'
import CountUp from 'react-countup'

import { priceSwitch } from '@/utils/compUtils'

import { ContentTsx } from '../contentTsx'

export type CountDataProps = {
  value: number
  name: string
  piont?: string
}

export function CountNum({ data }: { data: CountDataProps[] }) {
  const { selectedAssociationItem, changeEntFlag } = useContext(ContentTsx)
  const oldData = usePrevious(data)
  //  useEffect(() => {
  //     if (oldData && oldData.length) {
  //       console.log("====oldData===", oldData[0].value)
  //     }
  //   }, [data])
  //   const [isflag,setFlag]=useState(false)
  //   useEffect(()=>{
  //     setFlag(true)
  //   },[])
  return (
    <div
      className="drvierCount flexr jub"
      style={{ minHeight: 53, maxHeight: 71, overflow: 'hidden' }}
    >
      {data.map((item, index) => {
        return (
          <div key={index} style={{ width: '85px' }}>
            <div className="dr_count_num">
              {/*数字滚动*/}
              {changeEntFlag == 0 ? (
                <CountUp start={0} end={item.value} duration={2}></CountUp>
              ) : (
                <DynamicCounter
                  startValue={oldData?.length ? oldData[index].value : 0}
                  endValue={item.value}
                />
                // <RandomCount startValue={oldData?.length ? oldData[index].value : 0} endValue={item.value} /> //随机时间数字滚动
              )}

              {/* <CountUp start={0} end={item.value} duration={2}></CountUp> */}
              {/* <div>{item.value}</div>
              <DynamicCounter startValue={oldData?.length ? oldData[index].value : 0} endValue={item.value} /> */}
              {/*翻牌效果*/}
              {/* <div
                className={
                  (oldData?.length ? oldData[index].value : 0) != item.value ? "animate__animated animate__flipInX" : ""
                }
              >
                {item.value}
              </div> */}
            </div>
            <div className="dr_label">{item.name}</div>
            {item.piont ? <div className="dr_piont">{item.piont}</div> : null}
          </div>
        )
      })}
    </div>
  )
}
export const DynamicCounter = ({ startValue, endValue }: any) => {
  const [currentValue, setCurrentValue] = useState(startValue)
  const countTimerRef = useRef<any>(null)
  const isTime = (startValue: any, endValue: any) => {
    if (startValue == endValue) {
      return endValue
    } else if (startValue != endValue) {
      return Math.abs(Number(startValue) - Number(endValue))
    }
  }
  useEffect(() => {
    if (currentValue == endValue && countTimerRef.current) {
      clearInterval(countTimerRef.current)
    }
  }, [currentValue])

  const getTimeOut = () => {
    const time =
      isTime(currentValue, endValue) > 120
        ? (4 * 60 * 1000) / isTime(currentValue, endValue)
        : 2000
    // isTime(currentValue, endValue) > 2 ? 25000 / 2409 : 2000
    return time
  }

  const startPieTime = () => {
    if (countTimerRef.current) clearInterval(countTimerRef.current)

    countTimerRef.current = setInterval(function () {
      // debugger
      if (currentValue == endValue) {
        clearInterval(countTimerRef.current)
      } else {
        if (
          startValue > endValue &&
          currentValue > endValue &&
          currentValue > 0
        ) {
          setCurrentValue((prev: any) => {
            return prev - 1
          })
        } else if (startValue < endValue && currentValue < endValue) {
          setCurrentValue((prev: any) => prev + 1)
        }
      }
    }, getTimeOut())
  }
  useEffect(() => {
    startPieTime()
    return () => {
      if (countTimerRef.current) {
        clearInterval(countTimerRef.current)
      }
    }
  }, [endValue])

  useEffect(() => {
    startPieTime()
    return () => {
      if (countTimerRef.current) {
        setCurrentValue(0)
        clearInterval(countTimerRef.current)
      }
    }
  }, [])

  // useUpdateEffect(() => {
  // isfrist=false
  //   startPieTime()
  //   return () => {
  //     if (countTimerRef.current) {
  //       clearInterval(countTimerRef.current)
  //     }
  //   }
  // }, [endValue])

  // useEffect(() => {isfrist=true}, [selectedAssociationItem.key])

  return <div>{priceSwitch(currentValue)}</div>
}
function usePrevious(value: any[]) {
  const ref = useRef<any>()
  useEffect(() => {
    ref.current = value
  }, [value])
  return ref.current
}
